<!--  -->
<template>
  <div class="tab-item" @click="itemClick">
    <div v-if="!isactive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-h"></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name:"tabar-item",
    props: {
    path: String
  },
  data() {
    return {};
  },
  computed: {
    isactive() {
      return this.$route.path.indexOf(this.path) !== -1;
    },
    activeStyle() { // 获取当前活跃的router.path，判断是否等于父组件传过来的path
      return this.$route.path.indexOf(this.path) !== -1 ? { color: "#FF699C" } : {};
    }
  },
  methods: {
    itemClick() {
      this.$router.push(this.path);
    }
  }
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/extend.scss";

.tab-item {
  flex: 1;
  text-align: center;
  padding-top: 0.08rem;
  cursor: pointer;

  img {
    display: block;
    width: 0.5rem;
    max-width: 100%;
    margin: 0 auto;
  }

  .active {
    @extend .zhu_color;
  }
}
</style>